<template>
  <div>
    <!-- 商品 flex 布局 -->
    <div class="shop">
      <div
        class="box"
        v-for="item in datalist.goods"
        :key="item.goods_id"
        @click="goodinfo(item.goods_id)"
      >
        <img src="../../assets/images/8.jpg" alt="华为荣耀6Plus" />
        <h1>华为(HUAWEI) 荣耀6Plus 14G双4G版</h1>
        <div class="bottom">
          <p class="p1s">
            <span class="p1_spn1">￥{{ item.goods_price }}</span>
            <span class="p1_spn2">￥2499</span>
          </p>
          <p class="p2">
            <span class="p2_spn1">热卖中</span>
            <span class="p2_spn2">剩余{{ item.goods_number }}件</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 分页加载更多 -->
    <mt-button type="danger" size="large" @click="upload">加载更多</mt-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data() {
    return {
      datalist: {},
      goodsinfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      }
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    async getlist() {
      const { data: res } = await this.$http.get('goods', {
        params: this.goodsinfo
      })
      if (res.meta.status !== 200) {
        return Toast('商品列表获取失败')
      }
      // 获取成功
      this.datalist = res.data
      console.log(res.data)
    },
    // 加载更多
    upload() {
      this.goodsinfo.pagesize += 5
      this.getlist()
    },
    // 点击商品详情
    goodinfo(id) {
      // this.$store.commit('incrementgoods', id)
      this.$router.push(`/login/goods/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.shop {
  display: flex;
  flex-wrap: wrap;
  .box {
    width: 48%;
    height: 280px;
    border: 2px solid #ccc;
    margin: 3px;
    img {
      width: 100%;
      height: 180px;
    }
    h1 {
      font-size: 14px;
      letter-spacing: 0.3px;
    }
    .bottom {
      padding: 5px 3px;
      height: 55px;
      background-color: #cccccc;

      .p1s {
        text-align: left;
        // height: 10px;
        // background-color: #cccccc;
        margin-bottom: 5px;
        .p1_spn1 {
          font-size: 16px;
          color: red;
          margin-right: 10px;
        }
        .p1_spn2 {
          text-decoration: line-through;
        }
      }
      .p2 {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
